<template>
  <div class="container"> 
     <div class="mainbody">
      <div class="sidebar" :class="{ open: sidebarOpen }">
        <div v-if="!sidebarOpen" style="width: 100%;height: 100%;position: relative;" @click="toggleSidebar">
          <!-- 这个是那两个箭头 -->
          <div class="outicon">
              <el-icon><DArrowRight /></el-icon>
           </div>
        </div>
        <div v-if="sidebarOpen" class="talk_record">
                <div class="talk_record_head"   @click="toggleSidebar" >
                      <div class="line">

                      </div>
                      <div class="text">
                          <div>历史对话</div>
                      </div>
                </div>
                <div class="talk_record_content">
                    <div v-for="(item,index) in talk_record" class="item" :class="{ bg: selected==index }"  @click="selectitem(index)">
                          <div class="icon1">
                            <el-icon size="20px"><ChatDotRound /></el-icon>
                          </div>
                          <div class="name">
                              <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="item"
                                placement="top"
                                >
                                  <div>{{ item.length<8?item:item.substring(0,9)+"....." }}</div>
                                </el-tooltip>
                          </div>
                          <div class="icon2"  @click="editname(index)">
                            <el-icon><EditPen /></el-icon>
                          </div>
                          <div class="icon3" @click="deletename(index)">
                            <el-icon><Delete /></el-icon>
                          </div>
                    </div>
                </div>
            </div>

            <!--弹出修改名字的框-->
            <el-dialog
                v-model="dialogVisible"
                title="修改"
                width="30%"
                :before-close="handleClose"
              >
              <el-input v-model="tempname"  />
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="changename">
                      确定
                    </el-button>
                  </span>
                </template>
              </el-dialog>

          </div>
            <div class="mainbody_head">
                  <Head></Head>
            </div>
            <div class="mainbody_content">
              <div class="content_container">
                  <div class="chat_box">
                      <!-- 这个是聊天框 -->
                      <div class="botoom">
                        <!-- 这个是文本 -->
                        <div class="chat-content" ref="chatContent">
                          <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
                            <!-- 判断是用户还是自己 -->
                            <div class="chat-friend" v-if="item.uid !== '1001'">
                            <!-- 这里是对方的对话框 -->
                            <div class="chat-text2" v-if="item.chatType == 0">
                              {{ item.msg }}
                            </div> 
                            <!-- 这里是对方的聊天时间显示 -->
                            <div class="info-time2">
                              <span>{{ item.time }}</span>
                            </div>
                          </div>
                              <!-- 这里是我的聊天内容和显示 -->
                          <div class="chat-me"  v-else>
                                <div class="chat-text" v-if="item.chatType == 0" >
                                {{ item.msg }}
                              </div>
                              <!-- 这里是发送方的时间的显示 -->
                              <div class="info-time">
                                <span>{{ item.time }}</span>
                              </div>
                            </div>

                          </div>
                      </div>
                      </div>
                      </div>
                      <!--放知识库文件-->
                      <div class="filefield">
                        <div class="box1">
                            <div class="box_text1"> 
                              <div style="font-size: 14px">当前知识库:</div> 
                            </div> 
                        </div>
                        <div class="box2">
                            <div class="box_text2">
                              <div style="font-size: 14px;">所有文件:</div> 
                              <ul>
                                  <li v-for="(file,index) in fileList" :key="file"> 
                                    {{file.name }}
                                    <el-icon class="closebtn" @click="deleteFileInput(index)" color="#409EF" size="15px" style="margin-right: 8px; text-align: right;">
                                        <Delete />
                                    </el-icon>

                                  </li>  
                              </ul>
                              
                            </div>
                        </div>
                        <div class="box3">
                              <!-- 鼠标悬停过去有放大的效果，点击图片可以上传文件 -->
                              <div class="img" @click="openFileInput" @mouseover="startHoverAnimation" @mouseout="stopHoverAnimation">
                                  <img src=" " style="width: 100%;height: 100%;border-radius: 30px;"
                                  :style="{ transform: isHovered ? 'scale(1.1)' : 'none', 
                                  transition:'transform 0.3s ease-in-out'  }">
                              </div>
                        </div>
                        <form name="cancelfile">
                          <input type="file" ref="fileInput"  style="display: none;" @change="handleFileChange" multiple>
                        </form>
                    </div>
              </div>
                <div class="mainbody_content_foot">
                  <div class="foot">
                    <!-- 两个按钮 -->
                    <div class="btn_container">
                    <div class="btn">
                          <div class="img">
                             <img src="../assets/icon/add.png" style="width: 100%;height: 100%;"/> 
                          </div>
                          <div class="btn_text">
                              <div style="font-size: 13px;">新建对话</div>    
                          </div>
                    </div>
                    <div class="btn">
                          <div class="img">
                             <img src="../assets/icon/refresh.png" style="width: 100%;height: 100%;"/> 
                          </div>
                          <div class="btn_text"> 
                               <div style="font-size: 13px;">清除记录</div>
                          </div>
                    </div>
                 </div>
                      <!-- 输入框和按钮更改 -->
                      <div class="chatInputs">
                            <input class="inputs" v-model="inputMsg" @keyup.enter="sendText" />
                      <!-- 按钮更改 -->
                      <div class="send boxinput"  @click=" sendText">
                                  <img src="../assets/icon/send.png"  style="width: 100%;height: 100%; border-radius: 15px;" />   
                        </div>
                        </div>
                      <!-- 输入框和按钮更改 -->
                  </div>
              </div>
        </div>
     </div>
    </div>
</template>

<script>
import Head from "@/components/Head.vue"
import { animation } from "@/func/func";
// import api from "../api/index"
import axios from 'axios';
// import { createNamespacedHelpers } from "vuex";
// const { mapState,mapGetters ,mapMutations,mapActions}=createNamespacedHelpers('global')
export default{
  data(){
    return {
      input:"",
      sidebarOpen: false,
      talk_record:[
          "补发外国人永久身份证",
          "补发外国人在中国广东省的永久居住证明",
          "新建对话",
      ],
      selected:null,
      dialogVisible:false,
      tempname:"",
      inputText: '',
      isFocused: false,
      inputMsg: "",
      tempMsg:"",
      chatList: [],
      isHovered:false,
      fileList: [],
      selectedFiles: []
    }
  },
  components:{
   Head
  },
  computed:{
    // ...mapState(["history"])
  },
  mounted() {
    this.fetchFileList();
  },
  methods:{
    // ...mapMutations(["undateHistory"]),
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen; // 切换侧边栏的打开/关闭状态
    },
    selectitem(index) {
      this.selected=index;
      console.log("点击了",this.selected);
    },
    editname(index) {
       this.tempname=this.talk_record[index];
       this.dialogVisible=true;
    },
    changename() {
      this.talk_record[this.selected]=this.tempname;
      this.dialogVisible=false;
    },
    deletename(index) {
      this.talk_record.splice(index, 1);  
    },
        // 发送信息的函数
   sendMsg(msgList) {
      this.chatList.push(msgList);
      this.scrollBottom();
    },
    //获取窗口高度并滚动至最底层
    scrollBottom() {
      this.$nextTick(() => {
        const scrollDom = this.$refs.chatContent;
        animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);
      });
    },
    //鼠标悬停在图片上进行放大
    startHoverAnimation() {
      this.isHovered = true;
    },
    stopHoverAnimation() {
      this.isHovered = false;
    },
    //知识库上传文件
    openFileInput() {
      this.$refs.fileInput.click(); // 触发文件选择对话框
    },
    async handleFileChange(event) {
      console.log('hihi')
      var selectedFiles= event.target.files;
      for (let i = 0; i < selectedFiles.length; i++) {
        this.fileList.push({name:selectedFiles[i].name});
      }
      console.log(selectedFiles,event.target.files)
      if (selectedFiles) {
        console.log(selectedFiles[0].name,event.target.files,)
        console.log("选择的文件之一：",selectedFiles[0])
        //this.fileList.push({ name:selectedFiles.name })
        console.log("长度",selectedFiles.length)
       if(selectedFiles.length==1){
        console.log("一",selectedFiles[0])
        let formData = new FormData();
        formData.append('file', selectedFiles[0]);
        formData.append('knowledge_base_id', "kb1");
        this.$store.dispatch('kbs/uploadFile',formData)
        .then(res => {
          console.log("后端返回")
          console.log(res)
          this.$message({
            type: "success",
            message: "上传成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
       }else {
        console.log("多",selectedFiles)
        let formDatalist=new FormData();
        
        // selectedFiles.forEach(file => {
        //   formDatalist.append("files", file);
        // })

        formDatalist.append('knowledge_base_id', "kb1");
        this.$store.dispatch('kbs/uploadFiles',formDatalist)
        .then(res => {
          console.log("后端返回")
          console.log(res)
          this.$message({
            type: "success",
            message: "上传成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
       }
       document.forms["cancelfile"].reset()

        //console.log('选中的文件：', selectedFiles);
        // 在这里可以将选中的文件上传到服务器
        /*const formData = new FormData();
        formData.append('file', selectedFiles);
        fetch('/upload', {
          method: 'POST',
          body: formData
        })
        .then(response => response.text())
        .then(() => {
          this.fetchFileList();
        })
        .catch(error => console.error(error));*/
      }
    },

    deleteFileInput(index){
      this.fileList.splice(index, 1);
    },

    fetchFileList() {
      console.log("拿文件");
      this.$store.dispatch('kbs/getDocsList',{knowledge_base_id:"kb1"})
        .then(res => {
          console.log("后端返回")
          console.log(res)
          this.$message({
            type: "success",
            message: "获取成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
      console.log("知识库");
      this.$store.dispatch('kbs/getKbsList',{})
        .then(res => {
          console.log("后端返回")
          console.log(res)
          this.$message({
            type: "success",
            message: "获取成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })

      // fetch('/files')
      //   .then(response => response.json())
      //   .then(files => {
      //     this.fileList = files;
      //   })
      //   .catch(error => console.error(error));
      // try {
      //   const params={
      //     knowledge_base_id:"kb1"
      //   }
      //   const response = await api.getDocsList({knowledge_base_id:"kb1"});
      //   console.log("成功",response);

      // } catch (error) {
      //   // 处理登录失败后的逻辑

      //   console.error("报错",error);
      //   this.$message({
      //     message:"失败",
      //     type:'error'
      //     })
      // }


      // axios.get(
      //   "http://localhost:9876/api/local_doc_qa/list_files",{
      //     params:{
      //       knowledge_base_id:"kb1"
      //     },
      //     headers: {
      //      'Accept': 'application/json', // 指示服务器返回JSON格式数据
      //       Authorization: "Bearer " + localStorage.getItem("access_token")
      //     }
      //   })
      //   .then(res =>{
      //     console.log("res",res);
      //   })



    },
     
    //发送文字信息
async sendText() {
  let newDate = new Date(); 
  let sendtime=newDate.getHours()+":"+(newDate.getMinutes().toString().length==1?("0"+newDate.getMinutes()):(newDate.getMinutes()));;
  console.log("发送时间",sendtime);
      if (this.inputMsg) {
        let chatMsg = {
          time: sendtime,
          msg: this.inputMsg,
          chatType: 0, //信息类型，0文字，1图片
          uid: "1001", //uid
        };
        this.sendMsg(chatMsg);
        this.tempMsg=this.inputMsg;
        this.inputMsg = "";
      } else {
         alert('内容不可为空哦')
      }


        // let chatMsg = {
        //   time: "09：12 AM",
        //   msg: "信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片",
        //   chatType: 0, //信息类型，0文字，1图片
        //   uid: "1000", //uid
        // };
        // this.sendMsg(chatMsg);

      //发送请求
        const params = {
          knowledge_base_id:"kb1",
          question: this.tempMsg,
          history: []
        };

        // 调用api中的登录接口
        this.$store.dispatch('kbs/localDocChat',params)
        .then(res => {
          console.log("后端返回")
          console.log(res)
         // 处理登录成功后的逻辑
        // this.answer=response.response;
          let newDate2 = new Date(); 
          let receivetime=newDate2.getHours()+":"+(newDate2.getMinutes().toString().length==1?("0"+newDate2.getMinutes()):(newDate2.getMinutes()));;
          console.log("发送时间",receivetime);
          let chatMsg = {
            time: receivetime,
            msg: res.data.response,
            chatType: 0, //信息类型，0文字，1图片
            uid: "1000", //uid
          };
          this.sendMsg(chatMsg);
          this.$message({
            type: "success",
            message: "成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })

    }
  }
}

</script>

<style lang="scss" scoped>
.container {
  width: 100%;     /* 占满浏览器宽度 */
  height: 100%;    /* 占满浏览器高度 */
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
  cursor:default;
  caret-color: transparent;
  position: relative; /* 设置容器为相对定位，使得内容和侧边栏可以相对定位 */
}

.sidebar {
  position: absolute; /* 设置侧边栏为绝对定位，使其脱离文档流 */ 
  top:0;
  left: 0;
  height:90vh; /* 设置侧边栏的高度为对话框高度*/
  width: 40px; /* 设置侧边栏的默认宽度 */
  background-color:rgba(49, 67, 130, 0.8);  /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 0.8;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 999; /* 将侧边栏的层级设置为最高，使其覆盖在内容之上 */
  transition: all 0.1s ease; /* 添加动画过渡效果 */
  pointer-events: auto; /* 禁用侧边栏的鼠标交互事件，使其下面的内容可以点击 */
}

.sidebar.open {
  width: 250px; /* 设置侧边栏打开时的宽度 */
  background-color:#dae7f8 ; ; /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 1;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  pointer-events: auto; /* 启用侧边栏的鼠标交互事件 */
}

.talk_record {
  height:90vh;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
}
.talk_record .talk_record_head {
  height:6vh;
  width: 250px;
  border-top-right-radius: 15px;
  background-color: #c6d8f0;
  display: flex;
  flex-direction: column;
  justify-content: center ;
  align-items: center;
}
.talk_record_head .line {
  width: 80px;
  height: 3px;
  background-color: #000000;
}
.talk_record_head .text {
  width: 85px;
  height: 4vh;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.talk_record .talk_record_content {
  height:80vh;
  width: 250px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
}

.talk_record_content .item {
  height:40px;
  width: 250px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.bg {
  background-color: #9ec0ed;
}
.item .icon1 {
  height:40px;
  width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon2 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon3 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .name {
  height:40px;
  width: 150px;
  font-size: 14px;
  color: black;
  display: flex;
  flex-direction: row;
  justify-content: baseline ;
  align-items: center;
}

/**
不显示滚动条
 
::-webkit-scrollbar {
        width: 0px;
    }*/
.container .mainbody{
  min-width:75vw;
  width: auto !important;
  height:90vh;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chat_box .botoom {
  min-width: 70vw;
  width: auto !important;
  height: 74vh; 
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
   
}
.botoom .chat-content {
      width: 100%;
      height: 80%;
      overflow-y: auto;
      padding: 25px; 
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0; /* Safari,Chrome 隐藏滚动条 */
        height: 0; /* Safari,Chrome 隐藏滚动条 */
        display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
      }
}
.chat-wrapper {
        position: relative;
        word-break: break-all;
}
.chat-me {
        width: 71%; 
        margin-bottom: 10px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
}
.chat-friend{
      width: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      
}
.local{
  margin-top: 5px;
  width: 100%; 
  z-index:99;
  position: relative;
  float: right;
  margin-right: 50px;
  text-align: right;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px; 
  color: #000000; 
 }

.img-parse{
  width: 28 px;
  height: 28px;
  margin-top: -39px;
  margin-right:5px;
  float: right;
  display: inline;
}
.chat-text {
          box-sizing: border-box;
          display:inline;
          float: right;
          max-width: 300px;
          height: auto !important;
          padding: 15px;
          padding-bottom: 15px;
          padding-top: 15px;
          font-size: 15px;
          border-radius: 10px 10px 5px 10px;
          background-color: rgb(248, 248, 249);
          font-family: 'Inter';
          font-style: normal;
          font-weight: 400; 
          line-height: 18px;
          text-align:left;
          color: #000000;
          &:hover {
            background-color: rgb(224, 226, 231);
            } 
}

.chat-text2 {
            float: left;
            max-width: 300px;
            height: auto !important;
            padding: 20px;
            border-radius: 20px 20px 20px 5px;
            background-color: rgb(29, 144, 245);
            color: #fff;
            margin-bottom: 20px;
            /* &:hover {
              background-color: rgb(167, 10, 88);
            /* } 不知道为什么不行的hover */
}

.info-time {
            margin: 10px 0;
            color: #fff;
            font-size: 14px;
            display: flex;
            justify-content: flex-end;
            span {
              line-height: 30px;
            }
            span:first-child {
              color: rgb(101, 104, 115);
              margin-right: 10px;
              vertical-align: middle;
            }
}

.info-time2 {
      display: flex;
      width: 130px;
      color: #020202;;
      font-size: 14px;
      margin-left:50px; 
}

.mainbody .mainbody_head {
  min-width: 75vw;
  width: auto !important;
  height: 6vh;
  background-color:  #FFFFFF; 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mainbody_head .left_part {
    min-width: 25vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
}

.left_part .logo {
  min-width: 10vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  background-color: #88a9da;
}

.left_part .tap {
  min-width: 12vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}

.tap .tap1 {
  min-width: 3vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.tap .tap2 {
  min-width: 6vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.mainbody_head .right_part {
    min-width: 20vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.right_part .witcher {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.right_part .headicon {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.mainbody .mainbody_content {
  min-width: 75vw;
  width: auto !important;
  height: 84vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
}


.mainbody_content .content_container {
  width: 75vw;
  height: 77vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.content_container .chat_box {
  width: 50vw;
  height: 70vh; 
  margin-top: 1vh;
  margin-left:3vw;
  background: linear-gradient(152.12deg, rgba(150, 180, 226, 0.3) 0%, rgba(229, 239, 253, 0.3) 100%);
  box-shadow: 2px 4px 4px rgba(150, 180, 226, 0.17);
  border-radius: 10px; 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.content_container .filefield {
  width: 18vw;
  height: 70vh; 
  margin-top: 1vh;
  margin-left:5px;
  background: linear-gradient(152.12deg, rgba(150, 180, 226, 0.3) 0%, rgba(229, 239, 253, 0.3) 100%);
  box-shadow: 2px 4px 4px rgba(150, 180, 226, 0.17);
  border-radius: 10px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.filefield .box1{
  width: 15vw;
  height: 13vh; 
  //background-color:#d6dce6;
  background: linear-gradient(180deg, rgba(33, 51, 209, 0.2) 0%, rgba(215, 240, 255, 0.2) 0.01%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.8);
  border: 1px solid #FFFFFF;
  box-shadow: 0px 0px 60px #B9CCFA;
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 30px;
  margin-top:2vh;
}

.filefield .box2{
  width: 15vw;
  height: 30vh;
  background: linear-gradient(180deg, rgba(33, 51, 209, 0.2) 0%, rgba(215, 240, 255, 0.2) 0.01%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.8);
  border: 1px solid #FFFFFF;
  box-shadow: 0px 0px 60px #B9CCFA;
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 30px;
  margin-top:1vh;
}
.box_text1{
  color: #55669A;
  border: 0px solid #56679A;
  margin-top:0.5vh;
  text-align:left; 
  padding-left: 15px;  
  padding-top: 0;
  height: 27vh;
  width: 15vw;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400; 
  line-height: 24px;
}
.box_text2{
  color: #55669A;
  border: 0px solid #56679A;
  margin-top:0.5vh;
  text-align:left;
  padding-left: 15px;  
  padding-top: 5px; 
  height: 27vh;
  width: 15vw;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400; 
  line-height: 24px;
}

.box_text ul {
    overflow-y: auto; /* 截断时隐藏溢出内容 */
    font-weight: 500;
    height:24vh;
    margin-right: 3px;
    text-decoration: none;
    text-overflow: ellipsis; /* 显示省略号 */
    scrollbar-color:#cce0df;
    /*定义滚动条*/
    &::-webkit-scrollbar {
      width:6px;
    }
    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      
      background-color: #e0e4e4;/* 轨道背景色 */
      border-radius: 15px;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background-color: #cfd8d8; /* 滑块颜色 */
      border-radius: 15px;
    }

    
}

.box_text li {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;
    padding:5px;
    text-decoration: none;
    text-overflow: ellipsis; /* 显示省略号 */
    justify-content: space-between;
    position: relative;
}
.box_text li:nth-child(n+2)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 1px;
  background-color: #d0cccc; /* 分隔线颜色 */
}
.box_text li:hover {
    border-radius: 15px;
    cursor: pointer;
    background-color: rgba(243, 251, 251, 0.5);
}

.box_text li .closebtn:hover{
    border-radius: 10px;
    cursor: pointer;
    background-color: rgba(145, 155, 155, 0.5);
}


.filefield .box3{
  width: 15vw;
  height: 20vh;
  background: linear-gradient(180deg, rgba(33, 51, 209, 0.2) 0%, rgba(215, 240, 255, 0.2) 0.01%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.8);
  border: 1px solid #FFFFFF;
  box-shadow: 0px 0px 60px #B9CCFA;
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  // margin:0 5px; 
  margin-top:1vh;
  margin-bottom:2vh
}
.box3 .img {
  min-width: 13vw;
  width: auto !important;
  height: 18vh;  
  outline: none;
}

.animated {
  transition: transform 0.3s ease; /* 过渡动画效果 */
}
.animated:hover {
  transform: scale(1.1); /* 鼠标悬停时放大 */
}

.mainbody_content .mainbody_content_foot {
  min-width: 70vw;
  width: auto !important;
  height: 9vh; 
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mainbody_content_foot .foot {
  min-width: 45vw;
  width: auto !important;
  height: 6vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}

.foot .btn_container{
  display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
   
}
.btn_container .btn {
  min-width: 7vw;
  width: auto !important;
  height: 4vh;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin:0 5px; 
}

.btn .img {
  min-width: 2vw;
  width: auto !important;
  height: 3.8vh;
}


.btn .btn_text {
  min-width: 4vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
 
/* 用来规范按钮和文本框的格式 */
.chatInputs{
   
  min-width: 30vw;
  width: auto !important;
  height: 5vh;
  
  margin-left:2vw;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: baseline;
  align-items: center;

}
/* 输入文本框的格式 */
.inputs {
  width: auto !important;
  caret-color: black;
  min-width: 33vw;
  height: 5vh;  
  background-color: rgb(254, 255, 255);
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border: 0;
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s;
  font-size: 18px;
  color: #030000;
  font-weight: 100;
  margin: 0 -10px;
  outline: none;
}

.boxinput {
  min-width: 2vw;
  height: 5vh;
  width: auto !important;
  border: 0;
  background-color: rgb(217, 220, 230);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}
.outicon{ 
  position: absolute;
  bottom: 10px;
  left:10px;
}

  .el-icon{
  position: relative;
  font-size: 20px;
  font-weight: 50px;
  border-radius: 10px;
  color:  #DDE0EB;
  
}

</style>


